<template>
	<view class="tab-container">
		<view class="content">
			<view class="hand">
				<scroll-view scroll-x="true" class="scroll-class">
					<view class="dataInfo" :style="otherStyle">
						<view v-if="chooseTab == 1" class="dataList otherStyle" v-for="(item, index) in tabListLeft"
							:key="index" @click="changeTab(index)">
							<image class="icon" :src="item.icon"></image>
							<view :class="tabIndex == index ? 'activite' : ''" class="name">
								{{ item.label }}
							</view>
						</view>


						<view v-if="chooseTab == 2" class="dataList otherStyle" v-for="(item, index) in tabListRight"
							:key="index" @click="changeTab(index)">
							<image class="icon" :src="item.icon"></image>
							<view :class="tabIndex == index ? 'activite' : ''" class="name">
								{{ item.label }}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "baseTab",
		props: {
			tabIndex: {
				type: Number,
				default: 0
			},
			otherStyle: {
				type: Object, // 将otherStyle的类型设置为对象
				default: () => ({
					// justifyContent: "space-around" // 设置默认样式属性
				})
			}
		},
		data() {
			return {
				chooseTab: 1,
				tabListLeft: [{
						icon: "../../static/image/maintenance-worker/choose-task.png",
						label: "任务"
					},
					{
						icon: "../../static/image/maintenance-worker/mine.png",
						label: "我的"
					}
				],
				tabListRight: [{
						icon: "../../static/image/maintenance-worker/task.png",
						label: "任务"
					},
					{
						icon: "../../static/image/maintenance-worker/choose-mine.png",
						label: "我的"
					}
				],
			};
		},
		methods: {
			changeTab(index) {
				this.$emit("changeTab", index);
				if (index == 0) {
					this.chooseTab = 1;
				}
				if (index == 1) {
					this.chooseTab = 2;
				}
			}
		}
	};
</script>

<style lang="less" scoped>
	.tab-container {
		position: fixed;
		width: 100%;
		background-color: #4f4f4f;
		height: 7vh;
	}

	.content {
		.hand {
			.dataInfo {
				display: flex;
				text-align: center;
				width: 100%;

				.dataList {
					.name {
						font-size: 18rpx;
						color: #fff;
						display: block;
						line-height: 82rpx;
						width: 170rpx;
						margin-top: -32rpx;
					}

					.name.activite {
						color: #ffb612;
					}

					.icon {
						margin-top: 10rpx;
						width: 50rpx;
						height: 50rpx;
					}
				}
			}
		}

		.scroll-class {
			white-space: nowrap;
			// border-bottom: 2rpx solid #e1e4e6;
			height: 7vh;
		}
	}
</style>
